import React from 'react';
import {Flex, List, Tabs, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import {Panel, Layout} from '../../components/index'
import './index.less';

const Item = List.Item;
const Brief = Item.Brief;

class LoanRecord extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Layout className={'page-loanRecord'} history={this.props.history}>
        <div className={'tabsContainer'}>
          <Panel
            onClick={() => {
              this.props.history.push('/loanDetails/1')
            }}
            className={'card'}>
            <div className={'cHeader'}>
              <Flex justify={'center'} className={'cHeaderInner'}>
                <Flex.Item className={'cTitle'}>
                  <span className={'cTitleIcon'}>米</span>
                  <h4>米分期</h4>
                </Flex.Item>
                <div className={'cExtra'}>
                  {/*<div>查看详情</div>*/}
                  <Icon color={"#858585"} size={'xs'} type={'right'}/>
                </div>
              </Flex>
            </div>
            <WhiteSpace size={'lg'}/>
            <div className={'cBody'}>
              <Flex>
                <Flex.Item className={'cBodyLeft'}>
                  <div className={'cBodyLeftName'}>借款金额</div>
                  <p className={'cBodyLeftMoney'}><span>￥</span>40,000.00</p>
                </Flex.Item>
                <Flex.Item className={'cBodyRight'}>
                  <div className={'cBodyLine'}>
                    <label>借款方式：</label>
                    <span>按月等额本息</span>
                  </div>
                  <div className={'cBodyLine'}>
                    <label>借款期限：</label>
                    <span>3月</span>
                  </div>
                  <div className={'cBodyLine'}>
                    <label>借款时间：</label>
                    <span>2017-3-30</span>
                  </div>
                </Flex.Item>
              </Flex>
            </div>
            <WhiteSpace size={'lg'}/>
          </Panel>
          <WhiteSpace size={'lg'}/>
          <Panel
            onClick={() => {
              this.props.history.push('/loanDetails/1')
            }}
            className={'card'}>
            <div className={'cHeader'}>
              <Flex justify={'center'} className={'cHeaderInner'}>
                <Flex.Item className={'cTitle'}>
                  <span className={'cTitleIcon'}>米</span>
                  <h4>米分期</h4>
                </Flex.Item>
                <div className={'cExtra'}>
                  {/*<div>查看详情</div>*/}
                  <Icon color={"#858585"} size={'xs'} type={'right'}/>
                </div>
              </Flex>
            </div>
            <WhiteSpace size={'lg'}/>
            <div className={'cBody'}>
              <Flex>
                <Flex.Item className={'cBodyLeft'}>
                  <div className={'cBodyLeftName'}>借款金额</div>
                  <p className={'cBodyLeftMoney'}><span>￥</span>40,000.00</p>
                </Flex.Item>
                <Flex.Item className={'cBodyRight'}>
                  <div className={'cBodyLine'}>
                    <label>借款方式：</label>
                    <span>按月等额本息</span>
                  </div>
                  <div className={'cBodyLine'}>
                    <label>借款期限：</label>
                    <span>3月</span>
                  </div>
                  <div className={'cBodyLine'}>
                    <label>借款时间：</label>
                    <span>2017-3-30</span>
                  </div>
                </Flex.Item>
              </Flex>
            </div>
            <WhiteSpace size={'lg'}/>
          </Panel>
          <WhiteSpace size={'lg'}/>
        </div>
      </Layout>
    );
  }

}

LoanRecord.propTypes = {};

export default LoanRecord;
